<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>边框和阴影</title>
		<script type='text/javascript'>
			$(function() {
				$("#range").change(function() {
					var num = $(this).val();
					$("#value").text(num);
					$("#div1").css("box-shadow", "5px 5px " + num + "px red");
				});
			})
		</script>
		<style>
			.se {
				margin-left: 100px;
				height: 150px;
				width: 300px;
				border-radius: 50%;
				border: 1px solid palegreen;
				background-color: palegreen;
			}
			
			.se p {
				text-align: center;
				margin-top: 50px;
				font-size: 30px;
			}
			
			.nav {
				width: 100%;
				height: 150px;
			}
			
			ul {
				height: 50px;
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #6699cc;
				display: block;
				list-style-type: disc;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				padding-inline-start: 40px;
			}
			
			li {
				float: left;
				border-radius: 20px;
				margin-left: 60px;
				display: inline-block;
				margin: 6px;
			}
			
			li:last-child {
				border-right: none;
			}
			
			li a {
				display: block;
				border: 1px solid rgba(255, 255, 255, 0);
				background: rgba(255, 255, 255, 0);
				border-radius: 100px;
				padding: 10px 30px;
				font-size: 14px;
				color: #fff;
				transition: 0.5s;
				line-height: 1em;
				text-decoration: none;
			}
			
			li a:hover:not(.active) {
				background-color: #66ccff;
				transition: 0.5s;
				line-height: 1em;
				border: 1px solid #FFFFFF;
			}
			
			.box img {
				width: 500px;
				height: 600px;
				background-color: yellow;
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>

	<body>
		<div class="se">
			<p>欢迎来到我的网站</p>

		</div>
		<br />
		<div class="nav">
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">案例展示</a>
				</li>
				<li>
					<a href="#">最新文章</a>
				</li>

			</ul>

		</div>
		<div class="box">
			<img src="img/pro2.jpg" / width="500px" height="600px">
		</div>
	</body>

</html>